<template>
	<view class="fui-wrap page">
		<view class="page-content">
			<fui-form class="form" labelSize="28" labelColor="#333333" labelWeight="bold" labelWidth="500"
				labelRight="60" ref="form" top="0" :model="formData" :show="false">
				<fui-form-item :bottomBorder="false" class="form-item" :asterisk='required' label="银行开户名"
					:padding="['42rpx', '0', '0', '32rpx']" prop="name">
					<template #vertical>
						<fui-input :disabled="!edit" size="28" :padding="['20rpx', '0', '16rpx', '60rpx']" borderBottom
							placeholder="请输入银行开户名" v-model="formData.bankAccountName"></fui-input>
					</template>
				</fui-form-item>
				<fui-form-item :bottomBorder="false" class="form-item" :asterisk='required' label="开户行支行名称"
					:padding="['42rpx', '0', '0', '32rpx']" prop="bankBranchName">
					<template #vertical>
						<fui-input :disabled="!edit" size="28" :padding="['20rpx', '0', '16rpx', '60rpx']" borderBottom
							placeholder="请输入开户行支行名称" v-model="formData.bankBranchName"></fui-input>
					</template>
				</fui-form-item>
				<fui-form-item :bottomBorder="false" class="form-item" :asterisk='required' label="银行卡号"
					:padding="['42rpx', '0', '0', '32rpx']" prop="account">
					<template #vertical>
						<fui-input v-if="!edit" disabled size="28" :padding="['20rpx', '0', '16rpx', '60rpx']"
							borderBottom placeholder="请输入银行卡号" v-model="formData.accountCopy"></fui-input>
						<fui-input type='number' v-else size="28" maxlength='19'
							:padding="['20rpx', '0', '16rpx', '60rpx']" borderBottom placeholder="请输入银行卡号"
							v-model="formData.account"></fui-input>
					</template>
				</fui-form-item>
				<fui-form-item v-if="formData.recordNumber" :bottomBorder="false" class="form-item" :asterisk='required' label="备案编号"
					:padding="['42rpx', '0', '0', '32rpx']" prop="recordNumber">
					<template #vertical>
						<fui-input size="28" :padding="['20rpx', '0', '16rpx', '60rpx']" borderBottom
							placeholder="备案编号" v-model="formData.recordNumber" disabled :color="!edit ? '#333' : '#ccc'"></fui-input>
					</template>
				</fui-form-item>
				<fui-form-item v-show="formData.checkTime" :bottomBorder="false" class="form-item" :asterisk='required' label="认证时间"
					:padding="['42rpx', '0', '0', '32rpx']" prop="checkTime">
					<template #vertical>
              <fui-text :text="formData.checkTime || '认证时间'" :padding="['20rpx', '0', '16rpx', '60rpx']" size="26" :color="!edit && formData.checkTime ? '#333' : '#ccc'"></fui-text>
					</template>
				</fui-form-item>
				<view class="">
					<view class="submit-btn" v-if="edit">
						<fui-button @click="init" class="btn" width="40vw" height="78rpx" color="var(--fui-color-primary)" plain
							borderColor="var(--fui-color-primary)" text="取消"></fui-button>
						<fui-button class="btn" width="40vw" height="78rpx" @click="submit" background="var(--fui-color-primary)"
							text="提交"></fui-button>
					</view>

					<view class="submit-btn" v-else>
						<fui-button @click="tab.navigateBack()" class="btn" width="40vw" height="78rpx" color="var(--fui-color-primary)"
							plain borderColor="var(--fui-color-primary)" text="返回"></fui-button>
						<fui-button @click="editData" class="btn" width="40vw" height="78rpx" background="var(--fui-color-primary)"
							text="更新"></fui-button>
					</view>
				</view>
			</fui-form>

			<fui-dialog :buttons="[
					{ text: '取消', color: '#999999' },
					{ text: '确定', color: '#465CFF' }
				]" :show="showDialog" title="您确认要删除人员【张三】吗？" maskClosable @click="clickDialog"
				@close="showDialog = false"></fui-dialog>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import {
		useStore
	} from 'vuex'
	import api from '@/api/bank.js'
	import utils from '@/components/firstui/fui-utils'
	const store = useStore();
	const modal = inject('$modal');
	const tab = inject('$tab');
	const props = defineProps({});
	const edit = ref(false);
	const showDialog = ref(false);
	const {
		userType,
		companyId
	} = store.getters

	//校验规则
	const rules = ref([{
			name: 'bankAccountName',
			rule: ['required'],
			msg: ['请输入银行开户名']
		},
		{
			name: 'bankBranchName',
			rule: ['required'],
			msg: ['请输入开户行支行名称', ]
		},
		{
			name: 'account',
			rule: ['required'],
			validator: [{
				msg: '请输入正确的银行卡号',
				method: function(value) {
					const bankCardRegex = /^(\d{16}|\d{19})$/;
					if (bankCardRegex.test(value)) return true;
					return false
				}
			}]
		}
	]);

	const clickDialog = (e) => {
		if (e.index === 0) {
			// 取消
			showDialog.value = false;
		} else {
			// 确认
			showDialog.value = false;
		}
	};

	const form = ref();
	const formData = ref({});
	const required = ref(false);

	// 供应商
	const getSupplierBankInfo = () => {
		try {
			modal.loading()
			api.getSupplierBankInfo(companyId).then((res) => {
				modal.closeLoading();
				if (res.code === 0) {
					formData.value = {
						...res.data,
						checkTime: utils.dateFormatter(res.data.checkTime, 'y-m-d h:i:s', 2, true),
						accountCopy: res.data.account.slice(0, 4) + '*********' + res.data.account.slice(-
							3)
					} || {}
				} else {
					modal.msgError(res.msg);
				}
			})
		} catch (e) {
			modal.closeLoading();
			console.log(' getSupplierBankInfo===>', e);
		}
	}

	// 供应链
	const getBankInfo = () => {
		try {
			modal.loading()
			api.getBankInfo(companyId).then((res) => {
				modal.closeLoading();
				if (res.code === 0) {
					formData.value = {
						...res.data,
						checkTime: utils.dateFormatter(res.data.checkTime, 'y-m-d h:i:s', 2, true),
						accountCopy: res.data.account.slice(0, 4) + '*********' + res.data.account.slice(-
							3)
					} || {}
				} else {
					modal.msgError(res.msg);
				}
			})
		} catch (e) {
			modal.closeLoading();
			console.log('getBankInfo===>', e);
		}
	}

	const init = () => {
		edit.value = false
		required.value = false
		userType == 2 ? getSupplierBankInfo() : getBankInfo();
	}

	init()

	// 编辑
	const editData = () => {
		edit.value = true
		required.value = true
	}

	// 供应商
	const updateSupplierBankInfo = () => {
		try {
			modal.loading()
			api.updateSupplierBankInfo(formData.value).then((res) => {
				modal.closeLoading();
				if (res.code === 0) {
					modal.msgSuccess('保存成功');
					init()
				} else {
					modal.msgError(res.msg);
				}
			})
		} catch (e) {
			modal.closeLoading();
			console.log('updateSupplierBankInfo===>', e);
		}
	}

	// 供应链
	const updateBankInfo = () => {
		try {
			modal.loading()
			api.updateBankInfo(formData.value).then((res) => {
				modal.closeLoading();
				if (res.code === 0) {
					modal.msgSuccess('保存成功');
					init()
				} else {
					modal.msgError(res.msg);
				}
			})
		} catch (e) {
			modal.closeLoading();
			console.log('updateBankInfo===>', e);
		}
	}


	// 保存
	const submit = () => {
		form.value
			.validator(formData.value, rules.value)
			.then((res) => {
				modal.confirm('确认保存信息吗？').then(() => {
					if (res.isPassed) {
						userType == 2 ? updateSupplierBankInfo() : updateBankInfo();
					} else {
						modal.msg(res.errorMsg);
					}
				})
			})
			.catch((err) => {
				modal.msg(err.errorMsg);
				console.log(err);
			});
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #ffffff;
		min-height: 100%;

		&-content {
			width: calc(100% - 60rpx);
			margin: 0 auto;
		}

		.upload-head {
			padding: 0;
			padding-top: 32rpx;

			.head-text {
				margin-bottom: 12rpx;
			}
		}

		.submit-btn {
			display: flex;
			justify-content: space-between;
			width: 100%;
      box-sizing: border-box;
			margin-top: 100rpx;
      padding: 0 24rpx;
		}

		.form-upload {
			margin-left: 32rpx;
		}
	}
</style>